<template>
  <div class='container'>
        <!-- 新增学科弹窗 -->
        <el-form ref="form" :model="formAddList" label-width="80px" :rules=rules>
          <el-form-item
          label="所属科目"
          prop="subjectID"
          v-show="!this.$route.query.id && !this.$route.query.name"
          >
            <el-select v-model="formAddList.subjectID" placeholder="请选择">
              <el-option
               v-for="item in tagsAdd"
              :key="item.value"
              :label="item.label"
              :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" label-width="80px" prop="tagName">
            <el-input v-model="formAddList.tagName"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogFormclear">取 消</el-button>
            <el-button type="primary" @click="dialogFormAdd">确 定</el-button>
        </span>
  </div>
</template>

<script>
import { add, detail, update } from '@/api/hmmm/tags'
// , update
import { simple } from '@/api/hmmm/subjects'
export default {
  name: 'TagsAdd',
  props: {
    isEndt: {
      type: Boolean,
      required: true
    },
    listId: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      // 表单绑定的值
      formAddList: {
        tagName: '',
        subjectID: this.$route.query.id
      },
      tagsAdd: {}, // 所属学科目录
      // 表单验证
      rules: {
        tagName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ],
        subjectID: [
          { required: true, message: '请选择所属学科', trigger: 'change' }
        ]
      }
    }
  },
  created () {
    this.getSimple()
    // 编辑模块数据回填
    this.theEditor()
  },
  methods: {
    // 编辑回填表单
    async theEditor () {
      if (this.isEndt) {
        const res = await detail(this.listId)
        //   console.log(res)
        this.formAddList = res.data
      }
    },
    // 获取所属学科
    async getSimple () {
      const res = await simple()
      this.tagsAdd = res.data
    },

    // 点击确定提交新增学科
    async dialogFormAdd () {
      // 表单兜底验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.isEndt ? this.EditingSubject() : this.addSubject()
          this.formAddList = {}
        }
      })
    },

    // 编辑学科
    async EditingSubject () {
      await update(this.formAddList, this.listId)
      this.$message.success('修改学科成功')
      this.$emit('close')
    },

    // 添加学科
    async addSubject () {
      await add({ tagName: this.formAddList.tagName, subjectID: Number(this.formAddList.subjectID) })
      this.$message.success('添加学科成功')
      this.$emit('close')
    },

    dialogFormclear () {
      this.$emit('close')
    }
  }
}
</script>

<style scoped >
.el-input{
    width: 222px;
}
.dialog-footer{
    position: relative;
    left: 120px;
}
</style>
